<template>
  <transition name="slide-fade">
    <h4 v-if="flag" id="ems-small" @mouseenter.self="flag = false">
      <Icon type="ios-arrow-dropleft-circle" size="30" color="#1441BE"/>
    </h4>
    <div v-else id="ems-back" @mouseleave.self="flag = true" @click="$router.back()">
      <Icon type="ios-arrow-back" size="24" color="#1441BE" style="padding-bottom: 1px;"/>
      返回主页
    </div>
  </transition>
</template>

<script>
  export default {
    // 组件的名称
    name: 'emsBack',
    // props 可以是数组或对象，用于接收来自父组件的数据
    props: {},
    // 数据绑定
    data () {
      return {
        flag: true
      }
    },
    // 组件
    components: {},
    // 注意，不应该使用箭头函数来定义 methods函数 或者  computed函数 (例如 aDouble: () => this.a * 2)。
    // 理由是箭头函数绑定了父级作用域的上下文，所以 this 将不会按照期望指向 Vue 实例，this.a 将是 undefined
    // 方法
    methods: {},
    // 计算属性
    computed: {},
    // 监听
    watch: {
      // 监听路由变化
    },
    // 常用钩子函数，总共有8个，可以参照vue的生命周期看
    // 完成了 data 数据的初始化，el没有，就是说页面的dom没有完成转化，还是 {{data}} 这种
    created () {
    },
    // 完成挂载，相当于dom ready
    mounted () {
    },
    // 销毁，可以做一些定时器的销毁,缓存的清除等操作
    destroyed () {
    }
  }
</script>

<style lang="scss" scoped='scoped'>
  #ems-small {
    position: absolute;
    left: 0;
    bottom: 4%;
    width: 50px;
    height: 46px;
    background: $font-f;
    opacity: 0.8;
    border-radius: 0px 23px 23px 0px;
    text-align: center;
    line-height: 43px;

    &:hover {
      cursor: pointer;
    }
  }

  #ems-back {
    position: absolute;
    left: 0;
    bottom: 4%;
    width: 120px;
    height: 46px;
    background: $font-f;
    opacity: 0.8;
    border-radius: 0px 23px 23px 0px;
    text-align: center;
    line-height: 46px;
    font-size: 16px;
    font-family: PingFang SC;
    font-weight: 500;
    color: rgba(20, 65, 190, 1);
    z-index: 9999;

    &:hover {
      cursor: pointer;
    }
  }

  .slide-fade-enter-active {
    transition: all 1s ease;
  }

  .slide-fade-leave-active {
    /*transition: all 0.3s cubic-bezier(1.0, 0.5, 0.8, 1.0);*/
  }

  .slide-fade-enter
    /* .slide-fade-leave-active for below version 2.1.8 */
  {
    transform: translateX(-100px);
    opacity: 0;
  }

  .slide-fade-leave-to {
    transform: translateX(-50px);
    opacity: 0;
  }
</style>
